<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
      style="background-color: transparent"
      :border="false"
      fixed
      title="口水鸡"
      @click-left="$router.go(-1)"
    >
      <template #title>
        <div style="color: #fff; font-size: 18px">口水鸡</div>
      </template>
      <template #left>
        <van-icon color="#fff" name="arrow-left" size="18" />
      </template>
      <template #right>
        <van-icon color="#fff" name="like-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 轮播 -->
    <van-swipe @change="onChange">
      <van-swipe-item><img width="100%" src="/img/chuan.jpg" alt="" /></van-swipe-item>
      <van-swipe-item><img width="100%" src="/img/chuan.jpg" alt="" /></van-swipe-item>
      <van-swipe-item>
        <xgplayer />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/2</div>
      </template>
    </van-swipe>
    <van-tabs>
      <van-tab title="单品食材">
        <!-- 食材卡片 -->
        <van-card centered style="margin: 15px auto 0; width: 90vw; height: 36vh; background-color: #fff">
          <template #thumb>
            <van-image width="40vw" src="/img/shucai.png" />
            <!-- <img width="40vw" src="/img/shicai.jpg" alt="" /> -->
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import Xgplayer from '../components/Xgplayer.vue'
export default {
  // components: { Xgplayer },
  data() {
    return {
      current: 0,
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-indicator {
  position: absolute;
  left: 50%;
  bottom: 5px;
  padding: 2px 8px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.4);
  margin-left: -16px;
}
</style>
